<template>
  <div class="share">
    <div class="wz"><p>分享到</p></div>
    <div class="icon">
      <div class="wx"><span class="iconfont">&#xe63e;</span></div>
      <div class="qq"><span class="iconfont">&#xe666;</span></div>
      <div class="pyq"><span class="iconfont">&#xe6e9;</span></div>
      <div class="dd"><span class="iconfont">&#xe725;</span></div>
    </div>
    <div class="wz1">
      <span><el-button type="text" @click="wx" style="color:#000">微信</el-button></span>
      <span><el-button type="text" @click="qq" style="color:#000">qq好友</el-button></span>
      <span><el-button type="text" @click="pyq" style="color:#000">朋友圈</el-button></span>
      <span><el-button type="text" @click="dd" style="color:#000">钉钉</el-button></span>
     
    </div>
  </div>
</template>

<script>
export default {
  name:'Share',
  methods: {
      wx() {
        this.$alert('"菜鸟"想要打开"微信"', '', {
          confirmButtonText: '确定',
          showClose:false,
          // center:true,
          roundButton:true,
          showCancelButton:'取消',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      qq() {
        this.$alert('"菜鸟"想要打开"qq"', '', {
          confirmButtonText: '确定',
          showClose:false,
          // center:true,
          showCancelButton:'取消',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      pyq() {
        this.$alert('"菜鸟"想要打开"微信朋友圈"', '', {
          confirmButtonText: '确定',
          showClose:false,
          // center:true,
          showCancelButton:'取消',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      dd() {
        this.$alert('"菜鸟"想要打开"钉钉"', '', {
          confirmButtonText: '确定',
          showClose:false,
          // center:true,
          showCancelButton:'取消',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
}
</script>
<style lang="scss" scoped>
  @import '../../../../../assets/shopCarIconfont/iconfont.css';
  .share{
    width: 100%;
    height: 280px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 901;
    .wz{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      border-bottom: 1px solid rgb(248, 243, 243);
    }
    .wz1{
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 30px;
      span{
        font-weight: 800;
        width: 80px;
        text-align: center;
      }
    }
    .icon{
      width: 100%;
      height: 120px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .wx{
        display: inline-block;
        width: 80px;
        height: 80px;
        background-color: rgb(44, 219, 38);
        border-radius: 50%;
        text-align: center;
        .iconfont{
          font-size: 60px;
          line-height: 80px;
          color: #fff;
        }
      }
      .qq{
        display: inline-block;
        width: 80px;
        height: 80px;
        background-color: rgb(47, 133, 214);
        border-radius: 50%;
        text-align: center;
        .iconfont{
          font-size: 60px;
          line-height: 80px;
          color: #fff;
        }
      }
      .pyq{
        display: inline-block;
        width: 80px;
        height: 80px;
        background-color: rgb(44, 219, 38);
        border-radius: 50%;
        text-align: center;
        .iconfont{
          font-size: 60px;
          line-height: 80px;
          color: #fff;
        }
      }
      .dd{
        display: inline-block;
        width: 80px;
        height: 80px;
        background-color: rgb(79, 38, 192);
        border-radius: 50%;
        text-align: center;
        .iconfont{
          font-size: 60px;
          line-height: 80px;
          color: #fff;
        }
      }
    }
    
  }
</style>